<template>
  <div class="content-wrap" id="wrap">
    <el-image style="width: 100%; height: 100%" :src="src" fit="fill" usemap="#Map" id="qw"></el-image>
    <map name="Map" id="Map">
      <area id="1001" shape="rect" coords="780,245,815,272" href="javascript:void(0)" @click="a()" />
      <area id="1002" shape="rect" coords="647,436,684,462" href="javascript:void(0)" @click="b()" />
      <area id="1003" shape="rect" coords="762,589,798,613" href="javascript:void(0)" @click="c()" />
      <area id="1004" shape="rect" coords="754,379,788,406" href="javascript:void(0)" @click="d()" />
      <area id="1003" shape="rect" coords="862,381,894,408" href="javascript:void(0)" @click="h()" />
      <area id="1004" shape="rect" coords="968,267,1003,294" href="javascript:void(0)" @click="i()" />
      <area id="1005" shape="rect" coords="1047,388,1082,412" href="javascript:void(0)" @click="e()" />
      <area id="1006" shape="rect" coords="1048,507,1080,535" href="javascript:void(0)" @click="f()" />
    </map>
  </div>
</template>
<script>
export default {
  name: 'airConditioning',
  data() {
    return {
      src: require('../../../../public/img/publicBroadcasting.jpg')
    };
  },
  created() {},
  mounted() {
    var test = document.getElementById('wrap');
    test.onmousemove = function (e) {
      var x = e.layerX;
      var y = e.layerY;
      e.target.title = 'X is ' + x + ' and Y is ' + y;
    };
  },
  methods: {
    a() {
      this.$message.info('广播GF-1F-02')
    },
    b(){
      this.$message.info('广播GF-1F-03')
    },
    c() {
      this.$message.info('广播GF-1F-04')
    },
    d(){
      this.$message.info('广播GF-1F-05')
    },
    e() {
      this.$message.info('广播GF-1F-07')
    },
    f(){
      this.$message.info('广播GF-1F-08')
    },
    h() {
      this.$message.info('广播GF-1F-01')
    },
    i(){
      this.$message.info('广播GF-1F-01')
    },
    
    
  }
};
</script>
<style lang="scss" scoped>
.content-wrap {
  margin: 50px;
  width: 1722px;
  height: 795px;
}
</style>
